<!-- html的所有头部文件都是给浏览器看的，不展示给用户，这些信息指明了浏览器对本篇文档进行的各种行为操作 -->
<!DOCTYPE html>
<!-- 顶头的DOCTYPE指明了整个文档是以html标准进行解析的 -->
<html lang="en">
<!-- 标明本html文档的语言 -->

<head>
    <!-- meta（元数据）标签，通常用于对网页的描述 -->
    <!-- 指定字符编码，utf-8是国际通用编码 -->
    <meta charset="UTF-8">
    <!-- X-UA-Compatible是IE8的一个专有<meta>属性，它告诉IE8采用何种IE版本去渲染网页 -->
    <!--content="IE=edge"表明 最高级模式渲染文档，也就是任何 IE 版本都以当前版本所支持的最高级标准模式渲染 -->
    <!-- http-equiv这个属性的内容一般与http请求有关，可能被带到请求头中 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 定义了文档原始宽度为设备宽度，原始大小为1.0，可以让网页的宽度自动适应手机屏幕的宽度。 -->
    <!-- 一些比较重要的meta属性：
    5秒后自动跳转到指定url地址，没有地址则刷新界面
    <meta http-equiv="refresh" content="5 url=http://www.baidu.com">
    禁止浏览器从缓存中读取页面
    <meta http-equiv="pragma" content="no-cache">
    设置浏览器过期时间，本质是设置响应头中的expires属性
    <meta http-equiv="expires" content="3 Dec 2022">
    告诉搜索引擎网页的主要内容
    <meta name="description" content="my content"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 如果是想要一打开网页，则自动以原始比例显示，并且不允许用户修改的话，则是：
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> -->
    <!-- link标签定义了文档与外部资源的关系，除了CSS文件，还可以外联JS文件，字体文件等 -->
    <link rel="stylesheet" href="index.css">
    <!-- 定义了文档的标题 -->
    <title>Document</title>
</head>

<body>
    <!-- 打开开发者工具： ctrl+shift+i或F12（可能由于某些设置而失效） -->
    <!-- 开发者工具中元素的部分可以看到一个标准盒模型以及每个盒子再文档中的位置，宽高大小 -->


    <!-- 文档流 -->
    <!-- 文档流实际上就是浏览器默认的排版规则，指的是元素默认从左到右，从上往下的流式排列方式 -->
    <!-- 块元素和行内元素 -->
    <!-- 块元素（block）：单独占据一行，可以设置宽高，margin.padding属性且这些属性会作为盒子的一部分生效
        块级元素标签：div,p,b,h1~h6,ul,ol,br
    行内元素(inline)：会自动填充上一个元素右侧的空白部分，设置宽高无效；margin，padding只能设置左右，
                    设置上下margin无效，上下padding能填充效果，但不会作为盒子的一部分占据空间
        行内元素标签：a,span,em,i,strong,
    行内块级元素(block-inline)：兼容了上面两种元素的特点，能够设置宽高，同时会填充右侧空白部分，padding,margin都可以使用 -->
    <!-- 行内块级标签：img,input,textarea -->


    <!-- <div class="block">块元素</div>
    <div class="block">块元素</div>
    <span class="inline">行内元素</span>
    <span class="inline">行内元素</span>
    <span class="inline">行内元素</span>
    <div class="block-inline">行内块元素</div> -->


    <!-- 定位与布局 -->
    <!-- 常用的两种定位方式：绝对定位（absolute）和相对定位（relative），其他的定位方式还包括固定定位，粘性定位等 -->
    <!-- 绝对定位是指，按照其上一层设置了定位属性的祖元素（以下简称祖元素）进行定位，可以使用left,right,top,buttom这四种方式，
以祖元素的左上角为基准点进行移动定位
注意一下几点：
    1.上一层必须是有嵌套关系的元素，不是只要写在该元素的上方就可以为基准，比如下面的盒子，如果parent设置了定位属性，
那么第一种情况son可以按照parent进行绝对定位，第二种不行 -->
    <!-- 第一种：
    <div class="parent">
        <div class="son">可以根据parent绝对定位</div>
    </div>
    第二种：
    <div class="parent"></div>
    <div class="son">不能根据parent定位，此时两者没有嵌套关系，两个盒子不构成父子关系</div> -->
    <!-- 2.如果一个盒子设置了绝对定位，但没有设置了定位属性（position）的父级元素，那么他会根据整个文档流进行绝对定位
    3.只要有祖元素设置了定位属性就可以以此为参照，不论其属性是absolute还是relative -->
    <!-- 相对定位是指：想将这个元素按照标准文档流的定位方式进行定位，以这个定好位的地方位基准点，使用left,right,top,buttom这四种方式，
    进行相对偏移。要注意一点，相对定位后，元素初始的位置仍然被视为有元素占据，
    可以理解为往一个地方进行偏移后，仍有一个等大的透明盒子本身还在原来的地方占据空间 -->
    <!-- <div class="position-box">
        <div class="position-box-item"></div>
        <div class="position-box-item2"></div>
        <div class="position-box-item3"></div>
    </div> -->
    <!-- 浮动与清除浮动 -->
    <!-- 浮动：浮：被设置浮动的元素会脱离标准文档流，此时其位置不与标准文档流种的元素共同计算
            动：向浮动属性指定的方向移动，知道移动到父元素的边界
    浮动主要用于实现两栏，三栏，多栏布局，品字自适应布局，文字环绕等效果。再display:block-inline没有出现前，用于形成行内块级元素 -->
    <!-- 浮动的弊端：由于浮动会脱离原本的文档流，因此浮动元素的父元素的空间无法被撑开，会导致父元素高度坍塌 -->
    <!-- 清除浮动的方式：用各种方法触发BFC，使用额外元素设置清除浮动的属性，使用伪类清除浮动 -->
    <!-- <div class="float-box">
        <div class="float-box-left float-public"></div>
        <div class="float-box-right float-public"></div>
        <div class="float-box-clear"></div>
    </div> -->
    <!-- 超出文档流——BFC -->
    <!-- BFC：格式化上下文，触发BFC后，相当于形成了一个独立于文档流的空间（盒子），这个盒子中的所有元素的摆放不受外部元素的限制 -->
    <!-- 触发BFC的方法：
        1.绝对定位
        2.根元素
        3.display:block-inline,flex,table等
        4.overflow：hidden，scoll,auto
        5.float -->
    <!-- BFC的特点：
    1. BFC内部的盒子会垂直堆叠
    2.在一个BFC内部会发生margin重叠（两个盒子的间距由margin决定）
    3.内部空间独立，每个元素的左边界与包含快的左边界相接触，即使浮动元素也是如此
    4.BFC区域与float区域不重叠，计算高度时，内部的浮动子元素参与计算
     -->
    <!-- 居中 -->
    <!-- 块元素的居中方式：1.利用margin：0 auto,通过让浏览器自动设置margin进行居中
                     2.绝对定位的方式，利用绝对定位+left：50%居中，注意由于left是从左上角进行计算的，因此会多计算半个元素宽度的距离
                     所以我们需要用margin-left的负值让元素再左移半个元素宽度的距离，或者用transfrom；translate（-50%）相对自身进行偏移一半
    行内元素的居中方式：垂直居中：将自身的line-height设置为父元素的宽度
                     水平居中：父元素设置  text-align: center; -->
    <!-- <div class="center-box">
        <span>Hello world</span>
        <div></div>
    </div> -->

</body>

</html>